<template>
  <el-row :gutter="20" class="panel-group">
    <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="4" v-for="(item, i) in statusArr" :key="i">
      <div class="card-panel">
        <div class="card-panel-icon-wrapper" :class="iconArr[i]">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">{{item | statusFilter}}</div>
          <count-to
            :start-val="0"
            :end-val="statusCount[i]"
            :duration="3000"
            class="card-panel-num"
          />
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import CountTo from "vue-count-to";

export default {
  components: { CountTo },
  data() {
    return {
      getdata: [],
      statusArr: [],
      statusCount: [],
      iconArr: [
        "icon-formal",
        "icon-refund",
        "icon-end",
        "icon-suspension",
        "icon-transfer",
        "icon-production"
      ],
      loading: true
    };
  },
  props: ["studentData"],
  created() {
    setTimeout(() => {
      this.getdata = this.studentData;

      var statusData = [];
      var sum = {};
      if (localStorage.position == 1 ? true : localStorage.position == 0) {
        for (var i = 0; i < this.getdata.length; i++) {
          if (localStorage.username == this.getdata[i].manager) {
            var status = this.getdata[i].status;
            if (toCom(status)) {
              statusData.push({ status: status });
              sum[status + "sum"] = 1;
            } else {
              sum[status + "sum"] += 1;
            }
          } else if (localStorage.username == this.getdata[i].teacher) {
            var status = this.getdata[i].status;
            if (toCom(status)) {
              statusData.push({ status: status });
              sum[status + "sum"] = 1;
            } else {
              sum[status + "sum"] += 1;
            }
          }
        }
      } else {
        for (var i = 0; i < this.getdata.length; i++) {
          var status = this.getdata[i].status;
          if (toCom(status)) {
            statusData.push({ status: status });
            sum[status + "sum"] = 1;
          } else {
            sum[status + "sum"] += 1;
          }
        }
      }
      function toCom(status) {
        for (var i = 0; i < statusData.length; i++) {
          if (statusData[i].status === status) {
            return false;
          }
        }
        return true;
      }
      for (var i in sum) {
        this.statusCount.push(sum[i]);
      }
      for (var i = 0; i < statusData.length; i++) {
        var sta = statusData[i].status;
        this.statusArr.push(sta);
      }
    }, 900);
  }
};
</script>

<style scoped>
.card-panel {
  margin-top: 20px;
}
.panel-group .card-panel-col {
  margin-bottom: 32px;
}
.panel-group .card-panel {
  height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
}
.panel-group .card-panel:hover .card-panel-icon-wrapper {
  color: #fff;
}
.panel-group .card-panel:hover .icon-formal {
  background: #1b7bbbd8;
}
.panel-group .card-panel:hover .icon-suspension {
  background: #e4c435;
}
.panel-group .card-panel:hover .icon-transfer {
  background: #00bb00;
}
.panel-group .card-panel:hover .icon-production {
  background: #f4516c;
}
.panel-group .card-panel:hover .icon-refund {
  background: #34bfa3;
}
.panel-group .card-panel:hover .icon-end {
  background: #656b6d;
}
.panel-group .card-panel .icon-formal {
  color: #1b7bbbd8;
}
.panel-group .card-panel .icon-suspension {
  color: #e4c435;
}
.panel-group .card-panel .icon-transfer {
  color: #00bb00;
}
.panel-group .card-panel .icon-production {
  color: #f00a2ca6;
}
.panel-group .card-panel .icon-refund {
  color: #34bfa3;
}
.panel-group .card-panel .icon-end {
  color: #7c868b;
}
.panel-group .card-panel .card-panel-icon-wrapper {
  float: left;
  margin: 14px 0 0 14px;
  padding: 16px;
  transition: all 0.38s ease-out;
  border-radius: 6px;
}
.panel-group .card-panel .card-panel-icon {
  float: left;
  font-size: 48px;
}
.panel-group .card-panel .card-panel-description {
  float: right;
  font-weight: bold;
  margin: 26px;
  margin-left: 0px;
}
.panel-group .card-panel .card-panel-description .card-panel-text {
  line-height: 18px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  margin-bottom: 12px;
}
.panel-group .card-panel .card-panel-description .card-panel-num {
  font-size: 20px;
}
</style>

<style lang='scss'>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>